<template>
  <div class="marketlist">
    <ul v-for="(v, i) in arr" :key="i" @click="fun(i)">
        <img :src="v.imgurl" alt="" />
      <li class="">{{ v.text | filter }}</li>
      <li>{{v.price}}</li>
    </ul>
  </div>
</template>

<script>
import getlink from '../api/getlink.js'
export default {
  data() {
    return {
      text: "睡眠组合|酸枣仁膏*1、通安茶*1、茯神汤足浴粉*1、茯神汤足浴粉*1",
      arr:[]
    };
  },
  filters: {
    filter(val) {
      if (val.length > 26) {
        return val.substr(0, 26) + "..";
      } else {
        return val;
      }
    },
  },created(){
    getlink("/data/list/xiaoming").then((ok)=>{
      this.arr=ok.data.marketlist
    })
  },
  methods:{
    fun(i){
      // this.$router.push("/marketDetails")
      this.$router.push({name:"MarketDetails",params:{xiaoming:this.arr[i]}})
    }
  }
};
</script>

<style scoped>
.marketlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
ul {
  flex-shrink: 0;
  width: 1.6rem;
  height: 2.5rem;
  border-bottom: 0.01rem solid #999;
}
img {
  width: 100%;
  height: 1.35rem;
  margin-top: 0.15rem;
}
ul li:nth-child(2) {
  font-size: 0.12rem;
  padding-top: 0.1rem;
  margin-bottom: 0.25rem;
}
ul li:nth-child(3) {
  color: red;
}
</style>